<script lang="ts" setup>
import type { Setting } from '@/stores/types.ts'
import { useAppStore } from '@/stores/app'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const setting = ref<Setting>({})
setting.value = useAppStore().setting

// 自动接受
function autoAcceptChange(autoAccept) {
  useAppStore().settingChange({ autoAccept })
  setting.value = useAppStore().setting
}

// 自动接受延迟
function autoAcceptDelayChange() {
  useAppStore().settingChange({ autoAcceptDelay: setting.value.autoAcceptDelay })
  setting.value = useAppStore().setting
}
</script>

<template>
  <div class="tool_setting app_container">
    <div class="font-bold text-26px mb-30px mt-10px">{{ t(`Setting.title`) }}</div>
    <a-row :gutter="20">
      <a-col :span="6">
        <a-card :title="t(`Setting.autoAccept`)" :bordered="false">
          <template #extra>
            <a-switch v-model="setting.autoAccept" type="round" @change="autoAcceptChange" />
          </template>
          {{ t(`Setting.autoAcceptDesc`) }}
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card :title="t(`Setting.autoAcceptDelay`)" :bordered="false">
          <template #extra>
            <a-input-number v-model="setting.autoAcceptDelay" mode="button" class="accept_delay w-80px" size="mini"
              :max="10" @blur="autoAcceptDelayChange" />
          </template>
          {{ t(`Setting.autoAcceptDelayDesc`) }}
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="scss" scoped>
.tool_setting {
  .accept_delay {
    ::v-deep .arco-input-wrapper {
      padding: 0;

      input {
        text-align: center;
      }
    }
  }
}
</style>
